<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>信息技术部ITIL服务平台</title>
  <!-- <script src="//webapi.amap.com/maps?v=2.0&key=cee0160bebaf18f246314382d678939a" async></script>
  <script src="//webapi.amap.com/ui/1.1/main.js"></script> -->
  
  <script crossorigin="anonymous"
    integrity="sha512-weWXHm0Ws2cZKjjwugRMnnOAx9uCP/wUVf84W7/fXQimwYUK28zPDGPprDozomQLpKv6U99xN9PI9+yLI9qxNw=="
    src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.min.js"></script>
  <script crossorigin="anonymous"
    integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg=="
    src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
  <script crossorigin="anonymous"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
  <!-- <script src="./vue.global.js"></script> -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> -->
  <!-- <script src="./dayjs.min.js"></script> -->
  <script src="./moment.js"></script>
  <!-- <script src="./httpVueLoader.js"></script> -->
  <script src="./antd.js"></script>
  <link href="./antd.css" rel="stylesheet" type="text/css"></script>
  <!-- <link src="./antd.js.map" rel="stylesheet" type="text/css"></script> -->
</head>

<body>
  <div id="app">
    <div class="page">
      <div class="head fss">
        <img src="./logo.png" alt="">
        <h1 class="head-name" @click="showPopup">信息技术部ITIL服务平台</h1>
        <div class="timer"> {{timer}} <span style="cursor: pointer;" @click="requestFullscreen">{{isFull?'取消全屏':'全屏'}}</span></div>
      </div>
      <div class="content">
        <div class="box-l">
          <div class="title"><span class="tcol1">科室工单</span>汇总</div>
          <box1></box>
        </div>
        <div class="box-c np">
          <box2></box>
        </div>
        <div class="box-r">
          <div class="title"><span class="tcol1">科室报单</span>占比</div>
          <box3></box3>
        </div>

        <div class="box-l">
          <div class="title"><span class="tcol1">近期工单量</span>(周)</div>
          <box4></box4>
        </div>
        <div class="box-c">
          <div class="title"><span class="tcol1">在办工单</span>(21个)</div>
          <box5></box5>
        </div>
        <div class="box-r">
          <div class="title"><span class="tcol1">系统</span>公告</div>
          <box6></box6>
        </div>

        <div class="box-l">
          <div class="title"><span class="tcol1">满意度</span>统计</div>
          <box7></box7>
        </div>
        <div class="box-c">
          <div class="title"><span class="tcol1">用户差评</span>表</div>
          <box8></box8>
        </div>
        <div class="box-r">
          <div class="title"><span class="tcol1">满意度</span>统计</div>
          <box9></box9>
        </div>
        <popup ref="popup" v-bind="popupOption"/>
        <!-- <div class="box1 box_bg bx_bb pr">
          <box1 ref="echart1"></box1>
        </div>
        <div class="box2 box_bg bx_bb fcc pr">
          <div class="title pa">▎贡享联盟</div>
        </div>
        <div class="box3 box_bg bx_bb">
          <box3 ref="echart3"></box3>
        </div>
        <div class="box4 bx_bb">
          <box4 ref="echart4"></box4>
        </div>
        <div class="box5 bx_bb">
          <box5></box5>
        </div>
        <div class="box6 box_bg bx_bb">
          <box6 ref="echart6"></box6>
        </div> -->
      </div>
    </div>
  </div>

  <script>
    // var BASE_URL = 'https://xqzyzapi.meidp.com'

  </script>

  <script>
    Vue.component("timerRange", {
      data:function(){
        return {
          list:[
            '7日量',
            '30日量',
            '近半年',
          ],
          current:0
        }
      },
      methods:{
        change(index){
          this.current=index
          this.$emit('change',index)
        }
      },
      template:`
        <div class='timer-range fss'>
          <div class='tag' :class="current===index?'active':''" v-for="(item,index) in list" :key='item' @click="change(index)">{{item}}</div>  
        </div>
      `
    })
  </script>

  <!--  科室工单汇总  -->
  <script>
    Vue.component("box1", {
      data: function () {
        return {
          myChart: null,
          option: null,
          data: [
            { value: 40, name: "主动巡检"},
            { value: 11, name: "门诊部"},
            { value: 9, name: "血液肿瘤科"},
            { value: 7, name: "信息技术部"},
            { value: 7, name: "消化内科"},
            { value: 5, name: "心血管内科"},
            { value: 4, name: "妇产科病区"},
            { value: 4, name: "产科"},
            { value: 4, name: "耳鼻喉头颈外科"},
            { value: 4, name: "医学工程部"},
          ],
        };
      },
      template: `
        <div class='pr' style="width:100%;height:100%;">
          <div class='pa fss' style="z-index:10;flex-direction: row-reverse;width:100%;"><timerRange/></div>
          <div id='echart1' style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 );"></div>
        </div>
      `,
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart1"));
          this.option = {
            yAxis:{
              show:false
            },
            grid:{
              bottom:75
            },
            xAxis:{
              type:'category',
              axisTick:{show:false},
              axisLine:{show:false},
              axisLabel:{
                show:true,
                rotate:45,
                hideOverlap:true,
                color:'#fff'
              },
              data:this.data.map(i=>i.name)
            },
            series: [
              {
                type: "bar",
                barWidth:20,
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#fff'
                  },
                  formatter:e=>e.value+'%'
                },
                itemStyle:{
                  normal:{
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 从上到下变浅
                      [
                        { offset: 0, color: '#03a98a' },
                        { offset: 1, color: '#25527d' }

                      ], false
                    ),
                    opacity: 1
                  }
                },
                data: this.data.map(i=>i.value),
              },
            ],
            color: this.colors,
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
      },
      mounted() {
        this.initCharts();
      },
      created() {
        
      }
    });
  </script>

  <!-- 工单总数 -->
  <script>
    Vue.component('box2', {
      data() {
        return {
          list1: [
            {name:'今日工单总数',num:'29',color:'#fff'},
            {name:'待受理',num:'16',color:'#ef6179'},
            {name:'已受理',num:'05',color:'#04ffce'},
            {name:'已完成',num:'08',color:'#04ffce'},
          ],
          list2: [
            {name:'电话接单数',num:'4592',color:'#f4c132'},
            {name:'昨日量',num:'55',color:'#f4c132'},
            {name:'近七日',num:'366',color:'#04ffce'},
            {name:'月总量',num:'602',color:'#04ffce'},
            {name:'年总量',num:'4475',color:'#04ffce'},
            {name:'工单总量',num:'21941',color:'#04ffce'},
          ],
        }
      },
      methods: {
      },
      mounted() {
      },
      template: `
          <div style="width:100%;height:100%;">
            <div class="top fss">
              <div class="item" v-for="(item,index) in list1">
                <template v-if='index===0'>
                  <div class="name" style="font-size:18px;line-height:24px;color:#fff;margin:10px 0;">{{item.name}}</div>  
                  <div class="num" :style="{color:item.color,fontSize:'34px',fontWeight:'bold',textAlign:'center'}">
                    <span style="background:#0588ff;margin-right:5px;padding:0 5px;" v-for="t in item.num.toString()">{{t}}</span>
                  </div> 
                </template>
                <template v-else>
                  <div class="name" style="font-size:18px;line-height:24px;margin:10px 0;color:transparent;">1</div>  
                  <div class="num">
                    <div class="name" style="font-size:14px;color:#fff;">{{item.name}}</div>  
                    <div class="n" :style="{color:item.color,fontSize:'28px',fontWeight:'bold',textAlign:'center'}">{{item.num}}</div>  
                  </div> 
                </template>
              </div>
            </div>
            <div class="bot-title">近半年</div>
            <div class="bot fss">
              <div class="item" v-for="(item,index) in list2">
                <div class="name" style="font-size:12px;line-height:12px;margin-top:10px;color:#fff;text-align:center;">{{item.name}}</div>  
                <div class="num" :style="{color:item.color,fontSize:'24px',fontWeight:'bold',textAlign:'center'}">{{item.num}}</div> 
              </div>
            </div>
          </div>
        `
    })
  </script>

  <!--  科室报单占比  -->
  <script>
    Vue.component("box3", {
      data() {
          return {
            myChart: null,
            option: null,
            list1: [  //电话保障
              { name: "打印机", value: 10, color: '#f8c330' },
              { name: "电脑", value: 14, standard: '#03b894' },
              { name: "耗材及外设", value: 46, standard: '#f16076' },
              { name: "网络", value: 84, standard: '#380d7b' },
              { name: "应用软件", value: 27, standard: '#0487fe' },
              { name: "医疗软件", value: 16, standard: '#f26c30' },
              { name: "其他", value: 62, standard: '#32f7e1' },
            ],
            list2: [ //微信保障
              { name: "打印机", value: 10, color: '#f8c330' },
              { name: "电脑", value: 14, standard: '#03b894' },
              { name: "耗材及外设", value: 46, standard: '#f16076' },
              { name: "网络", value: 84, standard: '#380d7b' },
              { name: "应用软件", value: 27, standard: '#0487fe' },
              { name: "医疗软件", value: 16, standard: '#f26c30' },
              { name: "其他", value: 62, standard: '#32f7e1' },
            ],
            data: [
            { value: 88, name: "渠道1"},
            { value: 120, name: "渠道2"},
            { value: 98, name: "渠道3"},
            { value: 76, name: "渠道4"},
            { value: 74, name: "渠道5"},
            { value: 54, name: "渠道6"},
            { value: 48, name: "渠道7"},
            { value: 94, name: "渠道8"},
            { value: 84, name: "渠道9"},
            { value: 39, name: "渠道10"},
          ],
          };
      },
      methods: {
        initCharts1() {
          this.myChart = echarts.init(
            document.getElementById("echart3")
          );
          this.option = {
            legend:{
              show:true,
              bottom:20,
              textStyle:{
                color:'#fff'
              }
            },
            series: [
              {
                name:'电话报障',
                type:'pie',
                center:['25%','40%'],
                radius:['50%','70%'],
                top:40,
                bottom:40,
                label: {
                  show:true,
                  position:'center',
                  textStyle:{
                    color:'#fff',
                    fontSize:14
                  },
                  formatter:'电话报障\n'+this.list1.reduce((p,c)=>p+=c.value,0)
                },
                labelLine: {show: false},
                data:this.list1
              },
              {
                name:'微信报障',
                type:'pie',
                center:['75%','40%'],
                radius:['50%','70%'],
                top:40,
                bottom:40,
                label: {
                  show:true,
                  color:'#fff',
                  position:'center',
                  textStyle:{
                    color:'#fff',
                    fontSize:14
                  },
                  formatter:'微信报障\n'+this.list2.reduce((p,c)=>p+=c.value,0)
                },
                labelLine: {show: false},
                data:this.list2
              },
            ],
          };
          this.myChart.setOption(this.option);
        },
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart3"));
          this.option = {
            yAxis:{
              show:false
            },
            grid:{
              bottom:75
            },
            xAxis:{
              type:'category',
              axisTick:{show:false},
              axisLine:{show:false},
              axisLabel:{
                show:true,
                rotate:45,
                hideOverlap:true,
                color:'#fff'
              },
              data:this.data.map(i=>i.name)
            },
            series: [
              {
                type: "bar",
                barWidth:20,
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#fff'
                  },
                },
                itemStyle:{
                  normal:{
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 从上到下变浅
                      [
                        { offset: 0, color: '#03a98a' },
                        { offset: 1, color: '#25527d' }

                      ], false
                    ),
                    opacity: 1
                  }
                },
                data: this.data.map(i=>i.value),
              },
            ],
            color: this.colors,
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
      },
      mounted() {
        this.initCharts();
      },
      created() {
        `
        <div class='pr'>
            <div class='pa fss' style="z-index:10;flex-direction: row-reverse;width:100%;"><timerRange/></div>
            <div id='echart3' style="width:24vw;height:calc( (100vh - 78px - 3vw) / 3);"> </div>
        </div>
      `
      },
      template: `
        <div class='pr'>
          <div class='pa fss' style="z-index:10;flex-direction: row-reverse;width:100%;"><timerRange/></div>
          <div id='echart3' style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 );"></div>
        </div>
      `
    });
  </script>

  <!-- 近期工单量（周） -->
  <script>
    Vue.component("box4", {
      data() {
        return {
          myChart: null,
          option: null,
          list:[]
        };
      },
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart4"));
          this.option = {
            grid:{
              top:40,
              let:0,
              right:0,
              bottom:30
            },
            xAxis: {
              type: 'category',
              axisTick:{show:false},
              axisLine:{
                lineStyle:{
                  color:'#0b2866'
                }
              },
              axisLabel:{
                textStyle:{
                  color:'#fff'
                }
              },
              data: ['03.07-03.13', '03.14-03.20', '03.21-03.27', '03.27-04.03', '04.04-04.10', '04.11-04.17', '04.18-04.24', '04.25-05.01', '05.02-05.08', '05.09-05.15']
            },
            yAxis: {
              type: 'value',
              splitLine:{
                lineStyle:{
                  color:'#0b2866'
                }
              },
              axisLabel:{
                textStyle:{
                  color:'#fff'
                }
              },
            },
            series: [
              {
                type: 'line',
                smooth: true,
                symbolSize:5,
                lineStyle:{
                  color:'#04ffce'
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 从上到下变浅
                      [
                        { offset: 0, color: 'rgba(4, 255, 206,100)' },
                        { offset: 1, color: 'rgba(4, 255, 206,0)' }

                      ], false
                    ),
                  }
                },
                label:{
                  show:true,
                  position: 'top',
                  fontStyle:{
                    color:'#333'
                  }
                },
                smooth:false,
                data: [218, 172, 237, 269, 216 , 290, 255, 233 , 167 ,245],
              }
            ]
          }
          this.myChart.setOption(this.option);
        }
      },
      created() {
      },
      mounted() {
        this.initCharts();
      },
      template: `
        <div class="pr">
          <div id="echart4" style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 - 20px);"></div>
        </div>
      `
    });
  </script>

  <!-- 在办工单 -->
  <script>
    Vue.component("box5", {
      data() {
        return {
          list:new Array(21).fill({time:'11:21',content:'我是测试数据，我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据',people1:'王某某',people2:'李某某'})
        };
      },
      methods: {
        
      },
      created() {
      },
      mounted() { },
      template: `
        <div class="doing scrollbar">
          <div class="item" v-for="(item,index) in list">
            <span>{{item.time+item.content}}</span>
            <span class="tag">{{item.people1}}</span>
            <span>{{item.people2}}</span>
          </div>
        </div>
      `,
    });
  </script>

  <!-- 系统公告 -->
  <script>
    Vue.component("box6", {
      data: function () {
        return {
          myChart: null,
          option: null,
          data: [
            { value: 40, name: "公告1"},
            { value: 11, name: "公告2"},
            { value: 9, name: "公告3"},
            { value: 7, name: "公告4"},
            { value: 7, name: "公告5"},
            { value: 5, name: "公告6"},
            { value: 4, name: "公告7"},
            { value: 4, name: "公告8"},
            { value: 4, name: "公告9"},
            { value: 4, name: "公告10"},
          ],
        };
      },
      template: `
        <div class='pr' style="width:100%;height:100%;">
          <div class='pa fss' style="z-index:10;flex-direction: row-reverse;width:100%;"><timerRange/></div>
          <div id='echart6' style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 );"></div>
        </div>
      `,
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart6"));
          this.option = {
            yAxis:{
              show:false
            },
            grid:{
              bottom:75
            },
            xAxis:{
              type:'category',
              axisTick:{show:false},
              axisLine:{show:false},
              axisLabel:{
                show:true,
                rotate:45,
                hideOverlap:true,
                color:'#fff'
              },
              data:this.data.map(i=>i.name)
            },
            series: [
              {
                type: "bar",
                barWidth:20,
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#fff'
                  },
                  // formatter:e=>e.value+'%'
                },
                itemStyle:{
                  normal:{
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 从上到下变浅
                      [
                        { offset: 0, color: '#03a98a' },
                        { offset: 1, color: '#25527d' }

                      ], false
                    ),
                    opacity: 1
                  }
                },
                data: this.data.map(i=>i.value),
              },
            ],
            color: this.colors,
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
      },
      mounted() {
        this.initCharts();
      },
      created() {
        
      }
    });
  </script>

  <!-- 满意度统计 -->
  <script>
    Vue.component("box7", {
      data: function () {
        return {
          myChart: null,
          option: null,
          data: [
            { value: 40, name: "项目1"},
            { value: 11, name: "项目2"},
            { value: 9, name: "项目3"},
            { value: 7, name: "项目4"},
            { value: 7, name: "项目5"},
            { value: 5, name: "项目6"},
            { value: 4, name: "项目7"},
            { value: 4, name: "项目8"},
            { value: 4, name: "项目9"},
            { value: 4, name: "项目10"},
          ],
        };
      },
      template: `
        <div class='pr' style="width:100%;height:100%;">
          <div class='pa fss' style="z-index:10;flex-direction: row-reverse;width:100%;"><timerRange/></div>
          <div id='echart7' style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 );"></div>
        </div>
      `,
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart7"));
          this.option = {
            yAxis:{
              show:false
            },
            grid:{
              bottom:75
            },
            xAxis:{
              type:'category',
              axisTick:{show:false},
              axisLine:{show:false},
              axisLabel:{
                show:true,
                rotate:45,
                hideOverlap:true,
                color:'#fff'
              },
              data:this.data.map(i=>i.name)
            },
            series: [
              {
                type: "bar",
                barWidth:20,
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#fff'
                  },
                  formatter:e=>e.value+'%'
                },
                itemStyle:{
                  normal:{
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 从上到下变浅
                      [
                        { offset: 0, color: '#03a98a' },
                        { offset: 1, color: '#25527d' }

                      ], false
                    ),
                    opacity: 1
                  }
                },
                data: this.data.map(i=>i.value),
              },
            ],
            color: this.colors,
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
      },
      mounted() {
        this.initCharts();
      },
      created() {
        
      }
    });
  </script>

  <!-- 用户差评表 -->
  <script>
    Vue.component("box8", {
      data() {
        return {
          list:new Array(21).fill({time:'11:21',content:'我是测试数据，我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据我是测试数据',people1:'王某某'})
        };
      },
      methods: {
        
      },
      created() {
      },
      mounted() { },
      template: `
        <div class="doing scrollbar">
          <div class="item" v-for="(item,index) in list">
            <span>{{item.time+item.content}}</span>
            <span>{{item.people1}}</span>
          </div>
        </div>
      `,
    });
  </script>

  <!-- 剩余物料总量 -->
  <script>
    Vue.component("box9", {
      data: function () {
        return {
          myChart: null,
          option: null,
          data: [
            { value: 88, name: "项目1"},
            { value: 77, name: "项目2"},
            { value: 92, name: "项目3"},
            { value: 47, name: "项目4"},
            { value: 72, name: "项目5"},
            { value: 54, name: "项目6"},
            { value: 43, name: "项目7"},
            { value: 64, name: "项目8"},
            { value: 24, name: "项目9"},
            { value: 82, name: "项目10"},
          ],
        };
      },
      template: `
        <div class='pr' style="width:100%;height:100%;">
          <div class='pa fss' style="z-index:10;flex-direction: row-reverse;width:100%;"><timerRange/></div>
          <div id='echart9' style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 );"></div>
        </div>
      `,
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart9"));
          this.option = {
            yAxis:{
              show:false
            },
            grid:{
              bottom:75
            },
            xAxis:{
              type:'category',
              axisTick:{show:false},
              axisLine:{show:false},
              axisLabel:{
                show:true,
                rotate:45,
                hideOverlap:true,
                color:'#fff'
              },
              data:this.data.map(i=>i.name)
            },
            series: [
              {
                type: "bar",
                barWidth:20,
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#fff'
                  },
                  // formatter:e=>e.value+'%'
                },
                itemStyle:{
                  normal:{
                    color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1, // 从上到下变浅
                      [
                        { offset: 0, color: '#03a98a' },
                        { offset: 1, color: '#25527d' }

                      ], false
                    ),
                    opacity: 1
                  }
                },
                data: this.data.map(i=>i.value),
              },
            ],
            color: this.colors,
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
      },
      mounted() {
        this.initCharts();
      },
      created() {
        
      }
    });
  </script>

  <script>
    //zoom做页面适配,1920*1080
    var zoom = 1
    function match() {
      let w = document.body.clientWidth
      w = w > 1200 ? w : 1200
      zoom = w < 1920 ? w / 1920.0 : 1920.0 / w
      document.getElementsByClassName('page')[0].style.zoom = zoom

      //echart也需要进行zoom适配，解决鼠标位置偏移
      // let charts=['echart1','echart3','echart3_1','echart4','echart6','echart6_1']
      // let chartsDom=charts.map(c=>document.getElementById(c))
      // chartsDom.forEach(d=>{
      //   d.style.zoom=zoom
      //   d.style.transform.scale=1/zoom
      // })
    }
    window.onload = match
    window.addEventListener('resize', match)
  </script>

  <!-- 弹窗 -->
  <script type="module">
    Vue.component("popup", {
      props:{
        BreadCrumbList:{
          type:Array,
          default:()=>['面包屑1','面包屑2','面包屑3']
        },
        times:{
          type:Object,
          default:()=>{
            return {startDate:'2022-05-18',endDate:'2022-05-20'}
          }
        },
        onDateChange:{
          type:Function,
          default:e=>console.log(e),
        },
        searchCallback:{
          type:Function,
          default:e=>console.log(e),
        },
        ShowSelect:{
          type:Boolean,
          default:true
        },
        SelectDefaultValue :{
          type:String,
          default:''
        },
        SelectPlaceholder :{
          type:String,
          default:''
        },
        SelectData: {
          type: Array,
          default: () => {
            return [];
          },
        },
        SelectChange: {
          type: Function,
          default: () => {console.log('SelectChange')},
        },
        otherSelectors:{
          type:Array,
          default:()=>([])
        },
        title:{
          type:String,
          default:'我是标题'
        },
        columns:{
          type:Array,
          default:()=>([])
        },
        Data:{
          type:Array,
          default:()=>([])
        },
        tableX:{
          type:[String,Number],
          default:1000
        },
        tableY:{
          type:[String,Number],
          default:500
        },
        TableBordered:{
          type:Boolean,
          default:true
        },
        Loading:{
          type:Boolean,
          default:false
        },
        handleTableChange:{
          type:Function,
          default:e=>console.log('handleTableChange',e)
        },
        // TotalLIne:{
        //   type:Boolean,
        //   default:false
        // },
        Current:{
          type:Number,
          default:1
        },
        Total:{
          type:Number,
          default:0
        },
      },
      data(){
        return {
          show:true,
          pagination: {
            current: this.Current, //当前页数
            pageSize: 15, //	每页条数
            showSizeChanger: true, //是否可以改变 pageSize
            showQuickJumper: true, //	是否可以快速跳转至某页
            total: this.Total, //	数据总数
            pageSizeOptions: ["5", "10", "15", "20", "30", "40", "100"], //	指定每页可以显示多少条
            showTotal: () => `共 ${this.Total} 条数据`,
          },
        }
      },
      methods:{
        handleCancel(e) {
          this.visible=false
          this.$emit("modalIsClose");
        },
      },
      mounted(){

      },
      watch: {
        Current() {
          this.pagination.current = this.Current;
        },
        PageSize() {
          this.pagination.pageSize = this.PageSize;
        },
        Total() {
          this.pagination.total = this.Total;
        },
        columns() {
          this.TableColumns = this.columns;
        },
      },
      template:`
        <div class='mask' v-if="show">
          <div class="block pr">
            <img src="./close.png" class='pa close' @click="show=false"/>
            <template v-if="BreadCrumbList.length">
              <div class="mybreadcrumb">
                <a-breadcrumb>
                  <span slot="separator" style="color: rgba(255, 255, 255, 0.5)">
                    -
                  </span>
                  <a-breadcrumb-item
                    class="breadcrumb-item"
                    style="color: #eee"
                    v-for="(item, index) in BreadCrumbList"
                    :key="index"
                  >
                    {{ item }}
                  </a-breadcrumb-item>
                </a-breadcrumb>
              </div>
            </template>

            <div class="pickers fss mt10">
              <div class="content-item">
                <div>选择时间：</div>
                <div class="content-time">
                  <a-range-picker
                    :placeholder="['开始日期', '结束日期']"
                    :defaultValue="[
                      times.startDate,
                      times.endDate,
                    ]"
                    @change="onDateChange"
                    separator="-"
                  >
                    <a-icon
                      slot="suffixIcon"
                      type="calendar"
                      style="color: white; font-size: 12px"
                    />
                    <a-icon
                      slot="separator"
                      type="calendar"
                      style="color: white; font-size: 12px"
                    />
                  </a-range-picker>
                </div>
              </div>

              <div v-if="ShowSelect" class="content-item">
                <div>科室：</div>
                <div class="content-item">
                  <a-select
                    :default-value="SelectDefaultValue"
                    dropdown-class-name="myselect"
                    style="width: 180px"
                    @change="SelectChange"
                  >
                    <a-select-option :value="''"> {{SelectPlaceholder||'请选择'}} </a-select-option>
                    <a-select-option
                      v-for="(select, index) in SelectData"
                      :key="index"
                      :value="select.value"
                    >
                      {{ select.name }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>
              <!-- 渲染其他自定义下拉框 -->
              <template v-if='otherSelectors.length'>
                <div v-for="(item,index) in otherSelectors" :key="item.title" class="content-item">
                  <div>{{item.title}}：</div>
                  <div class="">
                    <a-select
                      :default-value="item.defaultValue||item.defaultValue===0?item.defaultValue:''"
                      dropdown-class-name="myselect"
                      style="width: 180px"
                      @change="e=>otherSelectorChange(index,e)"
                    >
                      <a-select-option v-if="item.hasPlaceholder||item.placeholder||false" :value="item.defaultValue||item.defaultValue===0?item.defaultValue:''"> {{item.placeholder||'请选择'}} </a-select-option>
                      <a-select-option
                        v-for="(select, index1) in item.data"
                        :key="index1"
                        :value="select.value"
                      >
                        {{ select.name }}
                      </a-select-option>
                    </a-select>
                  </div>
                </div>
              </template>

              <div class="content-item">
                <a-button type="primary" class="modal-btn" @click="searchCallback"> 查询 </a-button>
                <!-- <a-button type="primary" class="modal-btn"> 导出 </a-button> -->
                <!-- <a-button type="primary" class="modal-btn" v-print="'#printMe'">
                  打印
                </a-button> -->
              </div>
            </div>

            <div class="content-table" id="printMe">
                <div class="table-title">
                  {{ title }}
                </div>
                <div class="tablt-date">
                  统计日期:{{ times.startDate||'' }}至{{
                    times.endDate?.slice(0,10)||''
                  }}
                </div>
                <div
                  class="demo-infinite-container modal-table"
                >
                  <a-table
                    ref="TableInfo"
                    :columns="columns"
                    :data-source="Data"
                    :style="{ width: tableX + 'px' }"
                    :scroll="{ y: tableY, x: tableX }"
                    :bordered="TableBordered"
                    :loading="Loading"
                    :pagination="pagination"
                    rowClassName="table-row"
                    @change="handleTableChange"
                  >
                  </a-table>
                </div>
              </div>
          </div>
        </div>
      `
    })
  </script>


  <script>
    const App = new Vue({
      el: "#app",
      data() {
        return {
          title: 0,
          timer: '',
          upperNumber: [
            '日',
            '一',
            '二',
            '三',
            '四',
            '五',
            '六',
          ],
          charts: [],
          popupOption:{
            show:false,
            title:'标题1',
            TableWidth:725,
            times:{startDate:'2022-06-09',endDate:'2022-06-09'},
            BreadCrumbList:[],
            columns:[
              {
              title: "序号",
              dataIndex: "index",
              key: "index",
              align: "center",
              sorter: true,
              width: 64,
              customRender: (text, record, index) => `${index + 1}`,
            },
            {
              title: "科室名称",
              sorter: true,
              dataIndex: "dept",
              width: 160,
            },
            {
              title: "医生名称",
              dataIndex: "doctor",
              width: 133,
            },
            {
              title: "患者姓名",
              dataIndex: "patient",
              width: 133,
            },
            {
              title: "主要诊断",
              sorter: true,
              dataIndex: "diagnose",
              width: 232,
            },
            ], //表头
            Data:[
              {dept:'科室1',doctor:'医生1',patient:'患者1',diagnose:'诊断内容'},
              {dept:'科室2',doctor:'医生2',patient:'患者2',diagnose:'诊断内容'},
              {dept:'科室3',doctor:'医生3',patient:'患者3',diagnose:'诊断内容'},
              {dept:'科室4',doctor:'医生4',patient:'患者4',diagnose:'诊断内容'},
              {dept:'科室5',doctor:'医生5',patient:'患者5',diagnose:'诊断内容'},
            ],  //表单数据
            Total:0,  //表单数据总数
            Current:1,  //当前页
            PageSize:15,
            Loading:false,
            PageChange:e=>console.log('PageChange',e),
            PageSizeChange:e=>console.log('PageSizeChange',e),
            searchCallback:e=>console.log('searchCallback',e),
            sorterCallback:e=>console.log('sorterCallback',e),
          },
          isFull:false
        };
      },
      components: {
      },
      methods: {
        //加0
        fill(n) {
          return n = n >= 10 ? n : '0' + n
        },
        setTimer() {
          const fill = this.fill
          let time = new Date()
          let y = time.getFullYear()
          let m = time.getMonth() + 1
          let d = time.getDate()
          let h = time.getHours()
          let mm = time.getMinutes()
          let s = time.getSeconds()
          let w = time.getDay()
          this.timer = `${y}年${fill(m)}月${fill(d)}日 ${fill(h)}:${fill(mm)}:${fill(s)}     ${'星期' + this.upperNumber[w]}`
          // console.log(this.timer)
        },
        match() {
          let charts = ['echart1', 'echart3', 'echart3_1', 'echart4', 'echart6', 'echart6_1']
          this.chartsDom = charts.map(c => document.getElementById(c))
          this.chartsDom.forEach(c => {
            c.style.zoom = zoom
            c.style.transform.scale = 1 / zoom
          })
        },
        showPopup(option){
          // this.popupOption=option||this.popupOption
          console.log('showPopup',this.popupOption)
          this.$refs.popup.show=true
        },
        requestFullscreen () {
          if(this.isFull){
            if (document.exitFullscreen) {
              document.exitFullscreen()
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen()
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen()
            } else if (document.webkitCancelFullScreen) {
              document.webkitCancelFullScreen()
            }
          }else{
            const docElm = document.documentElement
            if (docElm.requestFullscreen) {
              docElm.requestFullscreen()
            } else if (docElm.msRequestFullscreen) {
              docElm.msRequestFullscreen()
            } else if (docElm.mozRequestFullScreen) {
              docElm.mozRequestFullScreen()
            } else if (docElm.webkitRequestFullScreen) {
              docElm.webkitRequestFullScreen()
            }
          }
        },
        exitFullScreen () {
          if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          }
        }
      },
      created() {
        setInterval(this.setTimer, 1000)
      },
      mounted() {
        console.log("vue main mounted");
        //全屏状态监听
        document.addEventListener('fullscreenchange', () => {
          const isFullScreen = document.fullscreenElement
          this.isFull=!!isFullScreen
        })
      },
    });
  </script>
  


  <style>
    /* @import url(./antd.css); */

    * {
      margin: 0;
      padding: 0;
    }

    .pr {
      position: relative;
    }

    .pa {
      position: absolute;
    }

    .page {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: linear-gradient(90deg,#00011d,#03106b, #06199a,#03106b,#00011d);
    }

    fss{
      display: flex;
    }

    .fcc{
      display: flex;
      justify-content: center;
      align-items: center;
    }



    .head {
      width: 100%;
      height: 78px;
      color: #fff;
      justify-content: space-between;
      align-items: center;
      padding:0 10px;
    }

    .head img.logo{
      
    }
    .head h1{
      font-size: 30px;
      font-family: '宋体';
      color: #fff;
    }
    
    .content {
      display: flex;
      /* justify-content: space-evenly; */
      flex-wrap: wrap;
    }

    .box-l .title,.box-c .title,.box-r .title{
      position: absolute;
      top: 12px;
      left: 0;
      font-size: 20px;
      color: #fff;
      font-weight: 400;
      padding-left: 12px;
    }

    .tcol1,.box-l .title .tcol1{
      color: #04ffce;
    }
    .tcol2,.box-l .title .tcol2{
      color: #fff;
    }
    .tcol3,.box-l .title .tcol3{
      color: #ef6079;
    }
    .tcol4,.box-l .title .tcol4{
      color: #f4c736;
    }
    
    .box-l{
      box-sizing: border-box;
      position: relative;
      width: 24vw;
      flex: 0 0 24vw;
      height: calc( (100vh - 78px - 3vw) / 3);
      /* background: #fff; */
      margin: 0 0 1vw 1vw ;
      padding: 10px;
      /* border: 1px solid #fff; */
    }

    .box-c{
      box-sizing: border-box;
      position: relative;
      width: 48vw;
      flex: 0 0 48vw;
      height: calc( (100vh - 78px - 3vw) / 3);
      /* background: #fff; */
      margin: 0 0 1vw 1vw ;
      padding: 10px;
      /* border: 1px solid #fff; */
    }

    .box-r{
      box-sizing: border-box;
      position: relative;
      width: 24vw;
      flex: 0 0 24vw;
      height: calc( (100vh - 78px - 3vw) / 3);
      /* background: #fff; */
      margin: 0 0 1vw 1vw ;
      padding: 10px;
      /* border: 1px solid #fff; */
    }

    .timer-range{
      display: inline-block;
    }
    .timer-range .tag{
      box-sizing: border-box;
      background: #086b58;
      color: #ddd;
      font-size: 12px;
      border-radius: 5px;
      padding: 1px 15px;
      margin-right: 2px;
      cursor: pointer;
      border: 1px solid transparent;
    }
    .timer-range .tag.active{
      background: #10b292;
      color: #fff;
      border: 1px solid #fff;
    }

    .box-c.np{
      padding: 0;
    }
    .box-c .top{
      width: 100%;
      height: 60%;
      box-shadow: 2px 2px 10px #00ffd583 inset,-2px -2px 10px #00ffd583 inset;
      justify-content: space-evenly;
      align-items: center;
    }
    .box-c .top .item{
      display: flex;
      flex-direction: column;
    }
    .box-c .top .item .num{
      flex-grow: 1;
    }
    .bot-title{
      font-size: 12px;
      color: #999;
    }
    .box-c .bot{
      width: 100%;
      height: calc(40% - 16px);
      box-shadow: 2px 2px 10px #00ffd583 inset,-2px -2px 10px #00ffd583 inset;
      justify-content: space-evenly;
      align-items: center;
    }

    .doing{
      width: 100%;
      height: calc(100% - 30px);
      margin-top: 30px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 14px;
      color: #fff;
      line-height: 30px;
      white-space: nowrap;
    }
    .doing .item{
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;
      padding-right: 5px;
    }
    .doing .item span:first-child{
      flex-shrink: 1;
      display: inline-block;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .doing .item .tag{
      line-height: 20px;
      height: 20px;
      box-sizing: border-box;
      background: #043b93;
      color: #4c90fd;
      border-radius: 10px;
      padding: 1px 5px;
      margin:0 3px;
      border: 1px solid #4c90fd;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box_bg {
      background: radial-gradient(rgba(1, 187, 255, 0),
          rgba(1, 187, 255, 0),
          rgba(1, 187, 255, 0.15));
      border-image: linear-gradient(90deg,
          rgba(1, 187, 255, 0.08) 0%,
          rgba(15, 245, 248, 0.16) 100%,
          rgba(1, 187, 255, 0.08) 100%) 2 2;
      border-radius: 4px;
    }

    .bx_bb {
      box-sizing: border-box;
    }

    .fss {
      display: flex;
    }

    .fcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .scrollbar::-webkit-scrollbar{
      width: 5px;
      background: #030c4d;
    }
    .scrollbar::-webkit-scrollbar-thumb{
      width: 5px;
      background: #b1b1ba;
      border-radius: 2px;
    }

    .mask{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .mask .block{
      width: 80vw;
      height: 92vh;
      /* background: rgba(2,12,37,0.80); */
      background: radial-gradient(#051b3b, rgba(5,27,59,0.66));
      border: 1px solid rgba(1,187,255,0.76);
      /* border-image: linear-gradient(90deg, rgba(1,187,255,0.76) 0%, rgba(15,245,248,0.16) 100%, rgba(1,187,255,0.08) 100%) 2 2; */
      border-radius: 5px;
      padding: 10px;
      background: #0a1a38;
      color: #d6e2ff;
      border: none;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .mask ::-webkit-scrollbar{
      width: 2px;
      height: 2px;
      /* background: #073861; */
    }
    .mask ::-webkit-scrollbar-thumb{
      border-radius: 5px;
      background: rgba(4, 123, 180, 1);
    }
    .mask ::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(7, 56, 97, 1);
  }
    .mask .block .close{
      /* position: fixed; */
      width: 30px;
      height: 30px;
      /* top: -15px;
      right: -15px; */
      top: 0;
      right: 0;
      cursor: pointer;
      z-index: 100;
    }

    .mt10{
      margin-top:10px;
    }

  .content-item {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-right: 28px;
  }
  .content-item div{
    color: #fff;
  }
  .content-time {
    width: 240px;
  }
  .title-select {
    height: 40px;
  }
  .title-select ::v-deep .ant-select-selection {
    background-color: rgba(7, 47, 88, 1);
    color: #fff;
    border: 1px solid rgba(1, 186, 255, 0.8);
  }
  .title-select  ::v-deep .ant-select-arrow {
    color: rgba(214, 226, 255, 1);
  }

  ::v-deep .content-table {
    margin: 18px auto;
    border-top: 1px solid rgba(32, 165, 247, 0.3);
    color: rgba(214, 226, 255, 1);
    text-align: center;
  }
.table-title {
  text-align: center;
  letter-spacing: 1px;
  font-size: 24px;
  margin: 24px auto 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#fff;
}
.tablt-date {
  font-size: 14px;
  margin-bottom: 24px;
  text-align: center;
  color: #fff;
}
::v-deep .ant-table-pagination.ant-pagination {
  margin: 10px;
}

::v-deep .ant-modal-content {
  /* overflow-y: scroll; */
}
.echart-box {
  height: 200px;
  padding: 0 34px;
}
.echart-box .echart-box-item {
    /* border: 1px solid rgba(4, 74, 116, 1); */
    padding: 8px 0 8px 34px;
  }
::v-deep .ant-table-footer {
  padding: 0;
  background: #0a1a38;
  border-top: 1px solid #003e63 !important;
}
::v-deep .ant-table-footer::before {
  background: none;
}
.ant-table-header::-webkit-scrollbar {
  display: none;
  border: none;
}
.ant-table-footer .ant-table-body::-webkit-scrollbar {
  display: none;
  border: none;
}

  .demo-infinite-container.modal-table{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-calendar-picker-input.ant-input,.ant-select-selection.ant-select-selection--single{
    background: rgba(1, 186, 255, 0.2) ;
    border: 1px solid #01baff ;
    color: #fff;
  }
  .ant-select-selection.ant-select-selection--single svg{
    color: #fff;
  }
  .ant-table-header.ant-table-hide-scrollbar{
    overflow: hidden !important;
  }
  .ant-table-header{
    margin-bottom:-17px;
    padding-bottom:17px !important;
    background: transparent;
  }
  .ant-table-thead{
    border:1px solid #003e63;
  }
  .ant-table-thead > tr > th{
    box-sizing: border-box;
    height: 40px;
    padding: 0 16px !important;
    background: transparent !important;
    color: #fff;
    border-bottom:1px solid #003e63;
  }
  .ant-table-scroll{
    border-right:1px solid #003e63;
  }
  
  .ant-table{
    color: #fff;
  }
  .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body{
    background: transparent;
  }
  .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td{
    border-right:1px solid #003e63;
  }
  .ant-table-tbody > tr > td{
    border-bottom:1px solid #003e63;
  }
  .ant-table-tbody > tr:hover >td{
    background: none !important;
  }
  .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant-table-fixed-right table{
    border:1px solid #003e63;
  }
  /* .ant-table-thead .ant-table-row-cell-break-word:first-child{
    padding: 9.5px 0 9.5px 8px;
  }
  .ant-table-thead > tr:first-child > th:first-child {
    border-top-left-radius: 4px;
  } */

  .ant-pagination-total-text{
    color: #fff;
  }
  .table-row{
    /* color: #fff; */
  }
  </style>
  <style lang="scss">
    ::v-deep .ant-input{
      background: rgba(1, 186, 255, 0.2);
      border: 1px solid #01baff;
    }
  </style>
  
</body>

</html>